<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>获取相应距离内的教练的地图坐标及信息</title>
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <script type="text/javascript" src="libs/jquery.min.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
    <style type="text/css">
        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
        #container {
            width:80%;
            height:450px;
            /*float: left;*/
            margin: 30px 10%;
            box-shadow: 2px 2px 6px #303030;
            border-top-left-radius: 4%;
            border-bottom-right-radius: 4%;
        }
    </style>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=QVZBZ-GCYOX-OMY4E-ZGGL6-CMTDQ-E3BXV"></script>
    <script>
        var geocoder,map, marker = null;
        function init() {

            var center = new qq.maps.LatLng(30.58,104.07);
            //中心点坐标，及地图缩放级别
            map = new qq.maps.Map(document.getElementById('container'),{
                center: center,
                zoom: 12
            });
            var info = new qq.maps.InfoWindow({map: map});
            geocoder = new qq.maps.Geocoder({
                complete : function(result){
                    map.setCenter(result.detail.location);

                }
            });
        }
    </script>
</head>
<body onload="init()">
    <!--导航栏-->
    <ul class="layui-nav" style="background-color: #202020">
        <li class="layui-nav-item" style="width: 5%"></li>
        <li class="layui-nav-item" style="width: 13%" value="logo"><a href=""><img src="imgs/brand/yoyoga.png" style="height: 50px"></a></li>
        <li class="layui-nav-item" style="width: 12%"></li>
        <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">主页</a></li>
        <li class="layui-nav-item" style="text-align: center;width: 8%">
            <a href="#">介绍</a>
            <dl class="layui-nav-child">
                <dd><a href="">瑜伽好处</a></dd>
                <dd><a href="">瑜伽流派</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">场馆</a></li>
        <li class="layui-nav-item" style="text-align: center;width: 8%">
            <a href="#">教练</a>
            <dl class="layui-nav-child">
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd class="layui-this"><a href="">选中项</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item" style="text-align: center;width: 8%"><a href="">社区</a></li>

        <li class="layui-nav-item" style="float: right">
            <a href="#"><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
            <dl class="layui-nav-child">
                <dd><a href="#">个人主页</a></dd>
                <dd><a href="#">修改信息</a></dd>
                <dd><a href="#">我的钱包</a></dd>
                <dd><a href="#">我的好友</a></dd>
                <dd><a href="#">退出</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"  style="float: right">
            <a href="">我的订单</a>
        </li>
        <li class="layui-nav-item" style="float: right">
            <a href="">消息<span class="layui-badge-dot"></span></a>
        </li>

        <!--<li class="layui-nav-item"  style="float: right">
            <a href="">注册</a>
        </li>
        <li class="layui-nav-item"  style="float: right"><span style="color: #cccccc">|</span></li>
        <li class="layui-nav-item" style="float: right">
            <a href="">登陆</a>
        </li>-->
    </ul>
    <!---------------------------------------------------------------------------------------->
    <!--选择栏-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend style="margin-left: 20%">请选择教练距离范围</legend>
    </fieldset>
    <form class="layui-form" action="" style="margin-left: 40%">
        <div class="layui-input-inline">
            <select name="distance" id="distance">
                <option value="">请选择范围：（单位m）</option>
                <option value="5000">5000m</option>
                <option value="10000">10000m</option>
                <option value="20000">20000m</option>
            </select>
        </div>
        <button type="button" class="layui-btn" onclick="getCurrentAddress()">确定</button>
    </form>
    <!--地图-->
    <div id="container"></div>
    <!--下边栏-->
    <div class="layui-footer layui-container" style="width: 100%;height: 250px;background-color: #202020">
        <img src="imgs/brand/yoyoga.png" alt="" style="width: 20%;margin-left: 40%;margin-top: 50px"/>
        <p style="font-size: large;width: 10%;margin-left: 44.5%;margin-top: 10px;text-align: center"><a href="index.html" style="color: #777777">www.yoyoga.com</a></p>
        <div class="layui-copy">
            <p style="font-size: 14px;color: #777777;width: 30%;margin-left: 38%;margin-top: 20px">© 2019 All Rights Reseved Template by esyoga </p>
        </div>
    </div>
    <script>
        var layer;
        layui.use('form','layer', function() {
            var form = layui.form;
            layer = layui.layer;
        });

        function getCurrentAddress() {
            var currentDistance = $("#distance option:selected").val();
            if (currentDistance != null&&currentDistance != ""){
                $.ajax({
                    url:"address/getTrainersAddressMap",
                    type:"post",
                    data:{
                        distance:currentDistance,
                    },
                    success:function (data) {
                        for(var i = 0;i<data.length;i++){
                            var info = "<a href=''>"+data[i].tName+"<br>"+data[i].tIntroduction+"<br>"+data[i].tAddress+"</a>";
                            codeLatLng(data[i].tLatlng,info);
                        }
                    }
                });
            }else {
                layer.msg('请选择对应的距离');
            }

        }

        function codeLatLng(latLng1,info1) {
            //获取经纬度数值   按照,分割字符串 取出前两位 解析成浮点数
            var latlngStr = latLng1.split(",",2);
            //alert(latlngStr[0]);
            var lat = parseFloat(latlngStr[0]);
            var lng = parseFloat(latlngStr[1]);
            var latLng = new qq.maps.LatLng(lat, lng);
            //调用信息窗口
            var info = new qq.maps.InfoWindow({map: map});
            //调用获取位置方法
            geocoder.getAddress(latLng);
            //
            var marker = new qq.maps.Marker({
                map:map,
                position: latLng
            });
            // //添加监听事件 当标记被点击了  设置图层
            qq.maps.event.addListener(marker, 'click', function() {
                info.open();
                info.setContent('<div style="width:280px;height:100px;">'+
                    info1+'</div>');
                info.setPosition(latLng);
            });
        }
    </script>
</body>

</html>